<template>
<div>
  <div v-show="certificateListVisible" class="mod-configeded">
    <div class="div-s">
    <el-form :model="params" :label-position="labelPosition" :inline="true" label-width="100px" class="queryFormed">
        <el-row class="row-s">
          <el-col :span="6">
           <el-form-item label="项目名称">
            <el-input v-model="params.projectName" clearable placeholder="请填写项目名称"></el-input>
          </el-form-item>
          </el-col>
          <el-col class="col-center" :span="6">
          <el-form-item label="状态">
            <el-select v-model="params.statusTag">
              <el-option
                v-for="item in statuses"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          </el-col>
          <el-col class="col-center" :span="6">
          <el-form-item label="负责人">
            <el-input v-model="params.employeeName" clearable placeholder="请填写负责人姓名"></el-input>
          </el-form-item>
      </el-col>

      <el-col class="col-right" v-if="conceal" :span="6">
      <el-form-item class="fazheng" label="合同开始日期">
          <el-date-picker type="date" v-model="params.contractStartTime" :picker-options="pickerOptionsValidityEndTimeA" placeholder="请选择开始日期" style="width:100%"></el-date-picker>
      </el-form-item>
      </el-col>
      <el-col v-if="conceal" :span="6">
      <el-form-item class="fazheng" label="合同结束日期">
            <el-date-picker type="date" v-model="params.contractEndTime" placeholder="请选择结束日期" @blur="blurValidityEndTime" :picker-options="pickerOptionsValidityEndTime" style="width:100%"></el-date-picker>
      </el-form-item>
      </el-col>

      <el-col class="col-center" v-if="conceal" :span="6">
      <el-form-item class="fazheng" label="实际开始日期">
          <el-date-picker type="date" v-model="params.actualStartTime" :picker-options="pickerOptionsValidityEndTimeB" placeholder="请选择开始日期" style="width:100%"></el-date-picker>
      </el-form-item>
      </el-col>
      <el-col class="col-center" v-if="conceal" :span="6">
      <el-form-item class="fazheng" label="实际结束日期">
            <el-date-picker type="date" v-model="params.actualEndTime" placeholder="请选择结束日期" @blur="blurValidityEndTimeB" :picker-options="pickerOptionsValidityEndTimeb" style="width:100%"></el-date-picker>
      </el-form-item>
      </el-col>
      <el-col class="col-right" v-if="conceal" :span="6">
      <el-form-item label="人员姓名">
            <el-input v-model="params.innerEmployeeName" clearable placeholder="请填写人员姓名"></el-input>
      </el-form-item>
      </el-col>

      <el-col v-if="conceal" :span="6">
      <el-form-item label="证书编号">
            <el-input v-model="params.innerCertificateNo" clearable placeholder="请填写证书编号"></el-input>
      </el-form-item>
      </el-col>


      <el-col class="col-center" v-if="conceal" :span="6">
      <el-form-item class="fazheng" label="">
      </el-form-item>
      </el-col>

      <el-col class="col-center" v-if="conceal" :span="6">
      <el-form-item class="fazheng" label="">
      </el-form-item>
      </el-col>

      <el-col class="col-right" :span="6">
      <el-form-item class="item-all">
      <el-button v-if="isAuth('certificate:certificateInfo:info')" class="buttonItem" size="mini" plain @click="queryAll()">重 置</el-button>
      <el-button v-if="isAuth('certificate:certificateInfo:info')" class="buttonItem" size="mini" type="primary" @click="clickDataFormSubmit()">搜 索</el-button>
      <el-button style="color:#6E92E9;" v-if="unfold" @click="clicKunfold()" type="text">展开<i class="el-icon-arrow-down zhankai"></i></el-button>
      <el-button style="color:#6E92E9;" v-if="!unfold" @click="clickPackUp()" type="text">收起<i class="el-icon-arrow-up zhankai"></i></el-button>
      </el-form-item>
      </el-col>
      </el-row>
    </el-form>
    </div>
    <div class="div-e">
     <div class="div-inquire">
        <div class="in-t">
          <div class="in-ts"></div>
          <h3 v-if="params.invalidFlag == 0">项目列表</h3>
          <h3 v-if="params.invalidFlag == 1">作废列表</h3>
        </div>
        <div v-if="this.params.invalidFlag == 0" class="div-button">
        <el-button class="div-buttonItema" v-if="isAuth('certificate:certificateInfo:info')" size="mini" type="primary" plain icon="el-icon-upload2" @click="exportXls()">数据导出</el-button>
        <el-button class="div-buttonItemb" v-if="isAuth('certificate:certificateInfo:info')" size="mini" type="primary" plain icon="el-icon-plus" @click="clickIncrease()">新增</el-button>
        <el-button class="div-buttonItemc" v-if="isAuth('certificate:certificateInfo:info')" size="mini"  plain icon="iconfont iconlajixiang" @click="clcikDelect()">作废列表</el-button>
        </div>
        <div v-if="this.params.invalidFlag == 1" class="div-button">
        <el-button class="div-buttonItemce" v-if="isAuth('certificate:certificateInfo:info')" size="mini"  type="text" @click="clickFack()">返回</el-button>
        </div>
      </div>
      <div class="div-ssse">
        <el-table
      :data="dataList"
      :header-cell-style="{background:'#F5F7FA'}"
      @sort-change='sort_change'
      :max-height="tableHeight"
      v-loading="dataListLoading"
      @selection-change="selectionChangeHandle"
      style="width: 100%;">
      <el-table-column
        prop="projectName"
        min-width="100"
        sortable='custom'
        align="center"
        label="项目名称">
      </el-table-column>
        <el-table-column
        prop="status"
        min-width="70"
        sortable='custom'
        align="center"
        label="状态">
        <template slot-scope="scope">
          <span v-if="scope.row.statusTag === 1">
            <i class="font_family icon-tuoyuan1" style="color:#6E92E9;"></i>
            {{scope.row.status}}
          </span>
          <span v-if="scope.row.statusTag === 2">
            <i class="font_family icon-tuoyuan1" style="color:#6EE976;"></i>
            {{scope.row.status}}
          </span>
          <span v-if="scope.row.statusTag === 3">
            <i class="font_family icon-tuoyuan1" style="color:#E9D56E;"></i>
            {{scope.row.status}}
          </span>
          <span v-if="scope.row.statusTag === 4">
            <i class="font_family icon-tuoyuan1" style="color:#8C8C8C"></i>
            {{scope.row.status}}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="employeeName"
        sortable='custom'
        align="center"
        min-width="110"
        label="负责人"
        :formatter="dateFormats">
      </el-table-column>
      <el-table-column
        prop="employeeMobile"
        sortable='custom'
        align="center"
        min-width="110"
        label="手机号">
      </el-table-column>
      <el-table-column
        prop="contractStartTime"
        sortable='custom'
        align="center"
        min-width="120"
        label="合同开始日期"
        :formatter="dateFormats"
      >
      </el-table-column>
      <el-table-column
        prop="contractEndTime"
        min-width="180"
        sortable='custom'
        align="center"
        label="合同结束日期"
        :show-overflow-tooltip="true"
        :formatter="dateFormats"
        >
      </el-table-column>
        <el-table-column
        prop="price"
        min-width="180"
        align="center"
        sortable='custom'
        label="项目金额（万元）"
        :show-overflow-tooltip="true"
        :formatter="dateFormats"
        >
      </el-table-column>
      <el-table-column
        prop="expireFlag"
        min-width="100"
        align="center"
        label="项目预警"
        :formatter="dateFormats"
        >
        <template slot-scope="scope">
          <span v-if="scope.row.expireFlag === 1">
            <i class="font_family icon-tuoyuan1" style="color:#6EE976;"></i>
            {{scope.row.expireInfo}}
          </span>
          <span v-if="scope.row.expireFlag === 2">
            <i class="font_family icon-tuoyuan1" style="color:#E9D56E;"></i>
             {{scope.row.expireInfo}}
          </span>
          <span v-if="scope.row.expireFlag === 3">
            <i class="font_family icon-tuoyuan1" style="color:#E96E6E;"></i>
            {{scope.row.expireInfo}}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        min-width="70"
        align="center"
        label="操作"
        >
        <template slot-scope="scope">
          <el-button style="color:#6E92E9;" type="text" size="mini" @click="addOrExamine(scope.row)">查看</el-button>
          <span style="color:#E8E8E8;" v-if="params.invalidFlag == 0">|</span>
          <el-button class="button-s" v-if="params.invalidFlag == 0" style="color:#E96E6E;" type="text" size="mini" @click="cancellation(scope.row)">作废</el-button>
        </template>
      </el-table-column>
    </el-table>
      <el-pagination
      background
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[5, 10, 20, 50, 100, 200]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, prev, pager, next, sizes, jumper">
    </el-pagination>
      </div>
    </div>
  </div>
  <information-mod @routerBack="routerBack" v-if="certificateListVisibleDetail"></information-mod>
  <project-particulars @particularsBack="particularsBack" :rowId="rowId" v-if="particularsVis"></project-particulars>

  <el-dialog
  title="提示"
  :visible.sync="cancellationDialogVisible"
  width="30%"
  class="dialog-can"
  >
  <span>
    <div class="cancellationIcon">

    <i class="el-icon-warning icon-can"></i><p class="zuofei">证书作废后</p><p class="bured">不可恢复</p><p class="zuofei">，是否作废？如确认作废，请填写情况说明。</p>
    </div>
    <el-form :model="disoadForm" ref="disoadForm" label-width="90px" class="demo-ruleForm">
      <el-form-item label="项目名称：">
        <span style="color:red">{{cancellationName}}</span>
     </el-form-item>
     <el-form-item label="负责人：">
       <span style="color:red">{{cancellationNo}}</span>
  </el-form-item>
    </el-form>
  </span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="cancellationDialogVisible = false">取 消</el-button>
    <el-button type="danger" @click="deleteHandle()">确 定</el-button>
  </span>
</el-dialog>

  </div>
</template>

<script>
  import merge from 'lodash/merge'
  import { eventBus } from '../../../../eventBus'
  import informationMod from './information-mod'
  import projectParticulars from './project-particulars'

  import Vue from 'vue'
  export default {
    data () {
      return {
        cancellationDialogVisible:false,
        unfold:true,
        matchingDialogVisible:false,
        particularsVis:false,
        queryModelVisible: false,
        certificateListVisible: true,
        certificateListVisibleDetail:false,
        isEdited: true,
        kiveList:false,
        cancellationName:'',
        cancellationNo:'',
        activeName: 'first',
        editableTabs: [],
        disoadForm:{},
        chartData: {
          columns: ['type', 'num'],
          rows: []
        },
        histogramData: {
          columns: ['d', '借出', '借入'],
          rows: []
        },
        loading: true,
        dataForm: {
          key: ''
        },
        dataList: [],
        tableData:[],
        treeData: [],
        userName:'',
        rowId:'',
        userCol:1,
        flag: false,
        statuses:[
          {label: '全部', value:0},
          {label:'中标', value:1},
          {label:'待建', value:2},
          {label:'在建', value:3},
          {label:'竣工', value:4},
        ],
        pageIndex: 1,
        pageSize: 20,
        totalPage: 0,
        conceal:false,
        concealName:false,
        concealNameCol:false,
        months:'',
        days:15,
        deleteId:'',
        labelPosition:'right',
        tableHeight:0,
        dataListLoading: false,
        dataListSelections: [],
        pickerOptionsValidityEndTime: {
           disabledDate: (time) => {
              return time.getTime() < this.params.contractStartTime
            }
        },
        pickerOptionsValidityEndTimeb:{
            disabledDate: (time) => {
              return time.getTime() < this.params.actualStartTime
            }
        },
        pickerOptionsValidityEndTimeA: {},
        pickerOptionsValidityEndTimeB: {},
        confInfos: [],
        professions: [],
        visId:{},
        addOrUpdateVisible: false,
        type:'',
        fail:'',
        kiveList:false,
        heightis: 305,
        name:'',
        success:'',
        params: {
          actualEndTime: "",
		      actualStartTime: "",
		      contractEndTime: "",
		      contractStartTime: "",
		      invalidFlag: 0,
		      projectName: "",
          employeeName:'',
          innerEmployeeName:'',
          innerCertificateNo:'',
		      statusTag: 0
        },
        orderBy:null,
        inOrder:null
      }
    },
    components: {
    informationMod,
    projectParticulars
    },
    computed: {
    myHeader () {
      return {
        'token': Vue.cookie.get('token')
      }
     }
    },
    mounted () {
      this.getRingCollect()
      eventBus.$on('pmlist',(msg)=>{
        this.kiveList = msg
        this.clickKive()
      })
    },
    watch: {
    },
    created(){
    this.getDataList()
    this.getUserName()
    this.initOrgTree()
    this.initJobs()
    this.clickPackUp()
    },
    methods: {

      blurValidityEndTime(){
        if(this.params.contractEndTime !== ''){
        this.pickerOptionsValidityEndTimeA = {
           disabledDate: (time) => {
              return time.getTime() > this.params.contractEndTime
            }
        }
        }else{
          this.pickerOptionsValidityEndTimeA = {}
        }
      },
      blurValidityEndTimeB(){
        if(this.params.actualEndTime !== ''){
        this.pickerOptionsValidityEndTimeB = {
           disabledDate: (time) => {
              return time.getTime() > this.params.actualEndTime
            }
        }
        }else{
          this.pickerOptionsValidityEndTimeB = {}
        }
      },

      cancellation(row){

      this.deleteId = row.id
      this.cancellationName = row.projectName
      this.cancellationNo = row.employeeName
      this.cancellationDialogVisible = true
      },
      deleteHandle(){
        this.dataListLoading = true
       this.$http({
          url: this.$http.adornUrl('/project/projectConfig/delete/'+ this.deleteId),
          method: 'get',
        }).then(({data}) => {
           if(data.code === 0){
           this.$message({
                  message: '作废成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                  this.dataListLoading = false
                  this.cancellationDialogVisible = false
                  this.getDataList()
                  }
                })
           }
        })
      },
      clcikDelect(){
      this.params.invalidFlag = 1
      this.getDataList()
      },
      clickFack(){
      this.queryAll()
      this.params.invalidFlag = 0
      this.getDataList()
      },
      addOrExamine(row){
      this.rowId = row.id
      this.certificateListVisible = false
      this.particularsVis = true
      this.certificateListVisibleDetail = false

      },
      clickIncrease(){
      this.certificateListVisible = false
      this.certificateListVisibleDetail = true
      },
      blurEndDate(){
        if(this.params.balanceEndDate !== null){
        this.pickerOptionsValidityEndTimeA = {
           disabledDate: (time) => {
              return time.getTime() > this.params.balanceEndDate
            }
        }
        }else{
          this.pickerOptionsValidityEndTimeA = {}
        }
      },
      adjustTableHeight(){
      this.$nextTick(() => {
            this.tableHeight = window.innerHeight - this.heightis;
            //后面的50：根据需求空出的高度，自行调整
        })
      },
      clickKive(){
      if (this.kiveList) {
      this.certificateListVisible = true
      this.particularsVis = false
      this.certificateListVisibleDetail = false
      this.clickPackUp()
      }
      },
      addOrUpdateHandle(row){
      this.visId = row
      this.certificateListVisible = false
      this.certificateListVisibleDetail = true
      },
      sort_change(column){
      this.orderBy = column.prop
      if(column.order =='ascending'){
        this.inOrder = 'asc'
      }
      if(column.order =='descending'){
        this.inOrder = 'desc'
      }
      this.getDataList()
      },
      initJobs () {
      this.$http({
         url: this.$http.adornUrl('/certificate/certificateInfo/getJobs'),
         method: 'get',
         params: {}
      }).then(({data}) => {
        if (data && data.length > 0) {
          this.editableTabs = data
          // this.editableTabs[0].code = 'all'
          this.editableTabs[0].code = 'all'
          // setTimeout(() => {
          //   // this.activeName = 'all'
          // })
        }
        })
      },
      initOrgTree() {
        this.$http({
          url: this.$http.adornUrl('/tenant/tenantDeptInfo/tree'),
          method: 'get',
          params: {}
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.treeData = [data.deptInfo]
          } else {
            this.treeData = []
          }
        })
      },
      getUserName(){
      this.$http({
          url: this.$http.adornUrl('/sys/user/info'),
          method: 'get',
          params: {}
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.userName = data.user.name
            console.log(this.userName);
            console.log('UOO51');
          }
        })
      },
      jobChange(value, item){
        this.confInfos = []
        this.professions = []
        this.params.idType = null
        this.params.profession = null
        this.$http({
          url: this.$http.adornUrl('/certificate/certificateInfo/getJobsConf'),
          method: 'get',
          params: this.$http.adornParams({
                  'type': value
                })
        }).then(({data}) => {
          if (data && data.length > 0) {
            this.confInfos = data
          }
        })
      },
      confChange(value, item){
        this.professions = []
        this.params.profession = null
        this.$http({
          url: this.$http.adornUrl('/certificate/certificateInfo/getJobsConf'),
          method: 'get',
          params: this.$http.adornParams({
                  'type': value
                })
        }).then(({data}) => {
          if (data && data.length > 0) {
            this.professions = data
          }
        })
      },
      routerBack(){
      this.certificateListVisible = true
      this.particularsVis = false
      this.certificateListVisibleDetail = false
      this.clickPackUp()
      this.getDataList()
      },
      particularsBack(){
      this.certificateListVisible = true
      this.particularsVis = false
      this.certificateListVisibleDetail = false
      this.clickPackUp()
      this.getDataList()

      },
      // 清空
      clicKunfold(){
      this.conceal = true
      this.unfold = false
      this.concealName = false
      this.concealNameCol = true
      this.userCol = 2
      this.heightis = 320
      this.adjustTableHeight()
      },
      clickPackUp(){
      this.conceal = false
      this.concealNameCol = false
      this.concealName = false
      this.unfold = true
      this.heightis = 267
      this.adjustTableHeight()
      },
      queryAll(){
        this.params = {
          certificateType:null,
          invalidFlag:0,
          type:null,
          name:null,
          idCard:null,
          mobile:null,
          pidType:null,
          idType:null,
          profession:null,
          certificateNo:null,
          innerEmployeeName:'',
          innerCertificateNo:'',
          // balanceStartDate:null,
          // balanceEndDate:null
        }
        this.getDataList()
      },
      clickDataFormSubmit(){
      this.getDataList()
      },
      dialogClose(){
      this.matchingDialogVisible = false
      this.queryAll()
      },
      sort_change(column){
      this.orderBy = column.prop
      if(column.order =='ascending'){
        this.inOrder = 'asc'
      }
      if(column.order =='descending'){
        this.inOrder = 'desc'
      }
      this.getDataList()
      },
      dateFormat (row, column, cellValue, index) {
        return cellValue ? cellValue.substring(0, 10) : ''
      },
      dateFormats(row, column, cellValue, index){
      if (!Boolean(cellValue)) {
                return "-";
            } else {
                return cellValue;
            }
      },
      setParams (params) {
        this.params = params
      },
      updateParams (validityType) {
        this.params.validityType = validityType
        this.getDataList()
      },
      getDataList () {

        this.params.actualEndTime = this.$dateFormat(this.params.actualEndTime)
        this.params.actualStartTime = this.$dateFormat(this.params.actualStartTime)
        this.params.contractEndTime = this.$dateFormat(this.params.contractEndTime)
        this.params.contractStartTime = this.$dateFormat(this.params.contractStartTime)

        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/project/projectConfig/paging'),
          method: 'post',
          data: this.$http.adornData({
            'pageNum': this.pageIndex,
            'pageSize': this.pageSize,
            'orderBy': this.orderBy,
            'inOrder': this.inOrder,
            'conditions':this.params,
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.dataList = data.data.records
            this.dataListLoading = false
            this.totalPage = data.data.total
          } else {
            this.dataList = []
            this.totalPage = 0
          }
          this.dataListLoading = false
        })
      },
      exportXls () {
        this.$http({
          url: this.$http.adornUrl('/project/projectConfig/export'),
          method: 'post',
          responseType: 'blob', // 防止返回乱码
          data: this.$http.adornData(merge(this.params,{
            // 'page': this.pageIndex,
            // 'limit': this.pageSize,
          })),
          showLoading: true
        }).then(({data}) => {
          if (data) {
            const link = document.createElement('a')
            let blob = new Blob([data], {type: 'application/vnd.ms-excel'})
            link.style.display = 'none'
            link.href = URL.createObjectURL(blob)
            let fileName = '项目列表.xls'
            link.setAttribute('download', fileName)
            link.download = fileName // 下载的文件名
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link)
          }
        })
      },
      templateDownloadTrans(){
      window.location.href = window.SITE_CONFIG.remoteUrl + 'others/certiTransaction-Template.xlsx'
      },
      sizeChangeHandle (val) {
        console.log(1);
        this.pageSize = val
        this.pageIndex = 1
        // if(
        //   this.params.certificateType=null,
        //   this.params.type=null,
        //   this.params.name=null,
        //   this.params.idCard=null,
        //   this.params.mobile=null,
        //   this.params.pidType=null,
        //   this.params.idType=null,
        //   this.params.profession=null,
        //   this.params.certificateNo=null,
        //   this.params.startDate=null,
        //   this.params.endDate=null
        // ){
        // this.getDataList()
        // }else{
          this.getDataListList()
        // }
      },
      currentChangeHandle (val) {
        console.log(2);
        this.pageIndex = val
        // if(this.params = {
        //   certificateType:null,
        //   type:null,
        //   name:null,
        //   idCard:null,
        //   mobile:null,
        //   pidType:null,
        //   idType:null,
        //   profession:null,
        //   certificateNo:null,
        //   startDate:null,
        //   endDate:null
        // }){
        // this.getDataList()
        // }else{
          this.getDataListList()
        // }
      },
      selectionChangeHandle (val) {
        this.dataListSelections = val
      },
      queryHandle () {
        this.queryModelVisible = true
        this.$nextTick(() => {
          this.$refs.queryModel.init()
        })
      },
      getRingCollect () {
        this.$http({
          url: this.$http.adornUrl('/certificate/certificateInfo/getRingCollect'),
          method: 'get',
          params: {}
        }).then(({data}) => {
          if (data && data.length > 0) {
            this.chartData.rows = data
          }
        })
      },
    }
  }
</script>
<style lang="scss" scoped>
.div-s{
  width: 100%;
  background-color: #FFFFFF;
}
.div-ssse{
  width: 100%;
  overflow: hidden;
  margin-top: 10px;
}
.col-essss{
}
  .icon-can{
    font-size: 22px;
    color: #F56C6C;
    margin-right: 10px;
  }
.cancellationIcon{
    display: flex;
    justify-content: center;
    align-items: center;
    .zuofei{
      font-size: 14px;
      color: #303133;
    }
   .bured{
     font-size: 14px;
     color: #F56C6C;
   }
  }
    .demo-ruleForm{
    margin-top: 20px;
  }
.div-e{
  width: 100%;
  background-color: #FFFFFF;
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 15px;
  margin-top: 15px;
}
.div-inquire{
  width: 100%;
  height: 45px !important;
  background-color: #ffffff;
  // display: flex;
  // align-items: center;
}
/deep/.div-buttonItemb{
    margin-left:10px;
    margin-right:10px;
    float: right;
    font-size: 14px;
  i{
    font-size: 14px;
  }
}
/deep/.div-buttonItema{
    float: right;
    font-size: 14px;
  i{
    font-size: 14px;
  }
}
/deep/.div-buttonItemc{
    float: right;
    font-size: 14px;
  i{
    font-size: 14px;
  }
}
.div-buttonItemce{
  font-size: 14px;
  float: right;
  margin-right: 40px;
}
/deep/.buttonItem{
  font-size: 14px !important;
  i{
    font-size: 14px;
  }
  }
/deep/.div-buttonItema{
  float: right;
  margin-right: 8px;
  font-size: 14px;
  i{
    font-size: 14px;
  }
}
.div-button{
  width: 30%;
  float: right;
  margin-top: 15px;
}
.in-t{
  width: 50%;
  float: left;
  height: 45px;
  display: flex;
  align-items: center;
  h3{
    font-size: 16px;
    float: left;
    color: #000000;
    margin: 0px !important;
    padding: 0px !important;
  }
}
.in-ts{
  width: 5px;
  height: 18px;
  float: left;
  margin-right: 8px;
  background: #6E92E9;
}
  .queryFormed .el-form-item{
    margin-top: 8px;
    margin-bottom: 8px;
  }
  /deep/.queryFormed .el-form-item{
    .el-select .el-input__inner{
    height: 36px!important;
    padding-right: 15px!important;
    padding-left: 15px!important;
    }
    .el-input--suffix .el-input__inner{
    padding-right: 15px!important;
    padding-left: 15px!important;
    }
  }
  .font_family{
    font-size: 15px !important;
  }
  .row-s{
  /deep/.el-col{
    display: flex;
    // justify-content: center;
    align-items: center;
    padding-left: 15px;
    padding-right: 15px;
  }
}
/deep/.col-right{
.el-form-item{
margin-left: auto!important;
}
}
/deep/.el-col{
    .fazheng{
    .el-form-item__content{
    .el-input--suffix{
    .el-input__inner{
      padding-right: 0px!important;
      padding-left: 30px!important;
       }
     }
   }
 }
}
/deep/.col-center{
  display: flex;
  align-items: center;
  justify-content: center;
}
// 分页颜色控制
.el-pagination.is-background .el-pager li:not(.disabled).active{
    background-color: #409EFF !important;
    color: #fff !important;
  }
 .zhenshu-s{
  margin-bottom: 10px;
  }
  .itemButton{
  width: 100%;
  margin-top: 10px !important;
  }
  // margin-bottom: 10px;
  /deep/.itemButtonMini{
    // float: left;
    // margin-left: 5px;
    font-size: 14px;
    i{
      font-size: 16px !important;
    }
  }
  /deep/.itemButtonSmall{
    float: left;
    font-size: 14px;
    margin-left: 15px !important;
    i{
    font-size: 16px;
    }
}
.buttonsuo{
  font-size: 14px;
}
.gaoji{
  font-size: 14px;
}
/deep/.itemButtonUpload{
  font-size: 14px;
  i{
    font-size: 16px;
  }
}
.upload-trans{
  float: right;
  margin-left: 15px;
}
.mod-configeded{
  background-color: #F5F7FA;
  padding: 15px !important;
  // margin-top: 48px;
}
  .iconPro {
    width: 1.5em;
    height: 1.5em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }
  // .upload-trans{
  // float: right;
  // margin-left: 18px;
  // }
  .queryFrome{
    margin-top: 8px;
    // margin-bottom: 5px !important;
  }
  .queryFrome .el-form-item{
    margin-bottom: 0px;
  }
  .el-button--danger {
    color: #f56c6c;
    background-color: #fff;
    border-color: #f56c6c;
  }
  .picturess{
      font-size: 16px;
    }
/deep/.tabs-s .el-tabs__active-bar{
  height: 2px !important;
}
/deep/.tabs-s{
  .el-tabs__header{
    .el-tabs__nav-wrap{
      margin-bottom: 0px !important;
     .el-tabs__nav-scroll{
      .el-tabs__nav{
        .el-tabs__item{
          border-right: none !important;
          border-left: none !important;
          background-color: #ffffff !important;
          // padding-left: 0px !important;
        }
      }
     }
    }
  }
}
/deep/.tabs-s{
.el-tabs__header{
  border-bottom: 1px solid #EBEEF5 !important;
  margin:0px 0px 8px 0px !important;
// .el-tabs__nav-wrap.is-scrollable{
//  padding:0px !important;
// }
  }
  }
  .el-button--warning {
    color: #fc8e2d;
    background-color: #fff;
    border-color: #fc8e2d;
  }
  .consequence{
    width: 100%;
    background-color: aqua;
    height: 60px;
    text-align: center;
    background-color: #FAFAFAFF;
    .consequence-s{
    div{
      height: 15px;
      margin-top: 15px;
    }
    .chenggong{
    width: 20px;
    color: #09AB6E;
    margin-right: 10px;
    }
    float: left;
     width: 50%;
     height: 60px;
     font-size: 15px;
     border: 1px solid #ccc;
    text-align: center;
    }
    .consequence-e{
      div{
      height: 15px;
      margin-top: 15px;
    }
    .shibai{
    width: 20px;
    color: red;
    margin-right: 10px;
      }
     float: left;
     width: 50%;
     height: 60px;
     text-align: center;
     font-size: 15px;
     border: 1px solid #ccc;
    }
  }
</style>
